<template>
    <view class="lianxi">

        <view class="ddd">
            <u-modal :show="isModalShow" @close="closeModal" margin-top="200px">
                <view style="font-weight: bold;">退出确认</view>
                <view style="margin-top: 30px;">资料尚未保存，是否取消编辑?</view>
                <view class="sure" @click="sure">确认</view>
            </u-modal>
            <view class="open-modal-btn" @click="showModal" style="color: blue;">取消</view>

        </view>
        <view class="xin">新建工单</view>
        <u-popup :show="show" mode="center" @close="close">
            <view>
                <view><img src="/static/img/dui.png" alt="" style="width: 30px; height: 30px; margin-top: 8px;"></view>
                <text @click="open">保存成功</text>
            </view>
        </u-popup>
        <view @click="show = true" style="color: blue;">提交</view>
    </view>
    <view class="one">
        <view class="a">
            <input type="text" placeholder="输入订单标题">
        </view>
        <view class="two">
            <li class="two_z">
                <p>
                    共联客户 <span style="color: red;">*</span>
                </p>
                <p style="color: #ccc;" @click="kehu">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    共联订单
                </p>
                <p style="color: #ccc;" @click="gonglian">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    工单类型<span style="color: red;">*</span>
                </p>
                <p style="color: #ccc;" @click="dingdan">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    工单标题<span style="color: red;">*</span>
                </p>
                <p style="color: #ccc;">点击填写</p>
            </li>
            <li class="two_zz">
                <p style="margin-left: 15px; margin-top: 15px;">
                    工单内容<span style="color: red;">*</span>
                </p>
                <p style="color: #ccc;"> <input type="text" placeholder="请输入工单内容"
                        style="margin-top: 20px; margin-left: 30px;"></p>
            </li>
            <li class="two_z">
                <p>
                    紧急状态<span style="color: red;">*</span>
                </p>
                <p style="color: #ccc;" @click="jinji">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    处理人员<span style="color: red;">*</span>
                </p>
                <p @click="guishu">
                    <img src="/static/img/11.png" alt="" style="width: 30px; height: 30px; vertical-align: middle;">
                    <span>赵小刚 <span style="color: #ccc;"> &gt;</span> </span>

                </p>
            </li>
            <li style="color: #666;">
                <p style="margin-left: 30px; margin-top: 10px;">外勤签到</p>

            </li>



        </view>
        <view class="two">
            <li class="two_z">
                <p>
                    执行人须到指定地点签到
                </p>
                <p>

                    <u-switch v-model="value13" asyncChange @change="asyncChange"></u-switch>
                </p>
            </li>
            <li class="two_z">
                <p>
                    签到范围(米)<span style="color: red;">*</span>
                </p>
                <p>

                    <input type="text" placeholder="点击填写" style="  width: 80px;">
                </p>
            </li>
            <li style="color: #666;">
                <p style="margin-left: 30px; margin-top: 10px; height: 40px;">注: 超出此范围签到将无效</p>

            </li>

            <view @click="asyncChange" v-for="(item, index) in list" :key="index">

                <li class="two_z">
                    <p>
                        {{ item.name }}<span style="color: red;">*</span>
                    </p>
                    <p>
                    <p style="color: #ccc;" @click="shijian"> 点击选择 &gt; </p>

                    </p>
                </li>
                <li class="two_z">
                    <p>
                        上传附件<span style="color: red;">*</span>
                    </p>
                    <qiaotankuang></qiaotankuang>
                </li>


            </view>

            <p style=" width: 375px;height: 40px; background-color: #fff;">提醒谁看</p>
            <li class="shuikan">
                <view>

                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>赵小刚</p>
                </view>
                <view>
                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi1">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>周小明</p>
                </view>
                <view>
                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi2">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>郭小涛</p>
                </view>
                <view>
                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi3">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>张小伟</p>
                </view>
                <view @click="haoduo">
                    <button style="width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ccc;">+</button>
                    <p style="margin-top: 4px;">更多</p>
                </view>
            </li>



            <li style="color: #666; border: 1px solid #ccc; height: 120px;">
                <p style="margin-left: 30px; margin-top: 30px; height: 40px;">注: 超出此范围签到将无效</p>

            </li>




        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import qiaotankuang from "../qiao-sousuo/qiaotankuang.vue";
const isModalShow = ref(false)
const showModal = () => {
    isModalShow.value = true
}
const closeModal = () => {
    isModalShow.value = false
}


const show = ref(false)
const open = () => {
    show.value = false
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
    })
}

const close = () => {
    show.value = false
}
const value13 = ref('');
const asyncChange = () => {
    value13.value = ''
}
const list = ref([
    { id: 0, name: "签到地址", a: "点击选择", }
])
const kehu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaokehu'
    })
}
const sheng = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshengri'
    })
}
const shijian = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshengri'
    })
}
const sure = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
    })
}
const guishu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoguishu'
    })
}
const haoduo = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaohaoduo'
    })
}
const dingdan = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongdanleixing'
    })
}
const gonglian = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoxuanzedingdan'
    })
}
const jinji = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaojinji'
    })
}

</script>

<style lang="scss">
.gouzi {
    position: absolute;
    left: 40px;
    top: -15px;

}

.gouzi1 {
    position: absolute;
    left: 110px;
    top: -15px;

}

.gouzi2 {
    position: absolute;
    left: 180px;
    top: -15px;

}

.gouzi3 {
    position: absolute;
    left: 250px;
    top: -15px;

}

.shuikan {
    display: flex;
    background-color: #fff;
    height: 100px;
    text-align: center;
    position: relative;

    view {
        width: 70px;
    }
}

.xin {
    margin-left: 100px;
}

.u-popup__content {
    height: 100px;
    text-align: center;
    border-radius: 10px;
    line-height: 50px;
}

.ddd {
    position: relative;
}

.sure {
    position: absolute;
    top: 150px;
    color: blue;
    // z-index: 999;
}

.u-modal__content {
    height: 100px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;


}

.u-modal {
    z-index: 99;
    position: fixed;
    top: 150px;
    left: 30px;
    background-color: white;
}

.confirm-btn {
    padding: 10px 20px;
    background-color: #1c94e0;
    color: #fff;
    border-radius: 5px;
}

.two_zz {
    height: 200px;
    background-color: white;
    border: 1px solid #ccc;
}

.two {
    margin-top: 20px;
}

.two_z {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    border: 1px solid #ccc;
    height: 25px;
    background-color: white;

}

.a {
    input {
        height: 40px;
        border: 1px solid #ccc;
        width: 360px;
        margin-top: 30px;
        background-color: white;
    }
}

.lianxi {
    width: 330px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 3px 20px;
    position: fixed;
    height: 40px;
    background-color: white;
    top: 0px;
    left: 0px;
}

.one {
    height: 1200px;
    background-color: rgb(238, 238, 238);
    margin-top: 80px;
    width: 360px;
    margin-left: 8px;
    border: 1px solid #ccc;
}
</style>